import { ConfigProvider, theme } from 'antd'
import { useSelector } from 'react-redux'
import { RouterProvider } from 'react-router-dom'
import { router } from './router/index'
import { IntlProvider } from 'react-intl'
import AppLocal from './assets/lang'

export default function App(): JSX.Element {
  const { themeStyle, localeLang } = useSelector(
    (state: { setting: { themeStyle: string; localeLang: string } }) =>
      state.setting,
  )

  return (
    <ConfigProvider
      locale={AppLocal[localeLang].antd}
      theme={{
        algorithm:
          themeStyle === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm,
      }}
    >
      <IntlProvider
        locale={AppLocal[localeLang].locale}
        messages={AppLocal[localeLang].messages}
      >
        <RouterProvider router={router} />
      </IntlProvider>
    </ConfigProvider>
  )
}
